<template>
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
        <van-search v-model="searchvalue" placeholder="请输入搜索关键词" />
        <div v-show="!statuse" v-for="item in searchData">
            <van-cell-group>
                <van-cell :title="item.goods_name" value="内容" />
            </van-cell-group>
        </div>


        <div class="menu" v-show="statuse">
            <h4>历史搜索</h4>
            <p>
                <span>电视机</span>
                <span>液晶电视</span>
                <span>液晶好屏</span>
                <span>智能手机</span>
                <span>苹果手机</span>
                <span>华为手机</span>
            </p>
            <h4>热门搜索</h4>
            <p>
                <span>电视机</span>
                <span>液晶电视</span>
                <span>液晶好屏</span>
                <span>智能手机</span>
                <span>苹果手机</span>
                <span>华为手机</span>
                <span>华为手机</span>
                <span>华为手机</span>
            </p>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { qsearchApi } from '@/api/api'
import _ from 'lodash'
const onClickLeft = () => {
    router.push('/')
}
let router = useRouter()
let searchvalue = ref('')
let searchData = ref([])
let statuse = ref(true)
watch(searchvalue, _.debounce(
    (val) => {
        if (val.length == 0) {
            statuse.value = true
        }
        else {
            statuse.value = false
            qsearchApi(val).then(res => {
                console.log(res);
                searchData.value = res.data.message
            })

        }

    }))




let status = ref(true)
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.menu {
    p {
        span {

            display: inline-block;
            width: 80px;
            height: 30px;
            background: #eee;
            text-align: center;
            line-height: 30px;
            border-radius: 10px;
            margin: 3px;
            border: 1px solid #000;
        }

    }
}
</style>